<template>
  <view class="goods_detail">
    <swiper indicator-dots>
      <swiper-item v-for="(item,index) in goodsDetail.mainImgUrls" :key="index">
        <image :src="item"/>
      </swiper-item>
    </swiper>
    <view class="price">
      <text>￥{{ goodsDetail.goodsPrice }}</text>
      <text>￥{{ goodsDetail.goodsPrice }}</text>
      <view class="goods_name">{{ goodsDetail.goodsName }}</view>
      <view class="selling_point">{{ goodsDetail.sellingPoint }}</view>
    </view>
    <view class="line"></view>
    <view class="content">
      <view class="tit">详情介绍</view>
      <image v-for="(item,index) in goodsDetail.contentImgUrls" :key="index" :src="item" class="content-img"
             mode="widthFix"/>
    </view>
    <view class="goods_nav">
      <uni-goods-nav :fill="true" @buttonClick="buttonClick" @click="onClick"/>
    </view>
    <drawer-sku :visible.sync="visible" :goods-info="goodsDetail" @close="closeSkuVisible"/>
  </view>
</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue";
import {reqGoodsDetail} from "@/api";
import UniGoodsNav from '@/components/uni-goods-nav.vue'
import DrawerSku from "./components/drawer-sku.vue";

const goodsDetail = ref({})
const visible = ref(false)

function onClick(event) {
}

function buttonClick() {
  visible.value = true
}

function closeSkuVisible() {
  visible.value = false
}

async function getGoodsDetail(goodsId) {
  goodsDetail.value = (await reqGoodsDetail({goodsId})).data
}

onLoad((options) => {
  getGoodsDetail(options.id)
})
</script>

<style lang="scss" scoped>
.goods_detail {
  background: #eeeeee;

  swiper {
    height: 700rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .price {
    background: #ffffff;
    margin-top: 5px;
    padding: 10px;

    text:nth-child(1) {
      font-size: 35rpx;
      color: $shop-color;
      line-height: 80rpx;
    }

    text:nth-child(2) {
      color: #ccc;
      font-size: 28rpx;
      text-decoration: line-through;
      margin-left: 20rpx;
    }

    .goods_name {
      font-size: 32rpx;
      line-height: 60rpx;
    }

    .selling_point {
      color: #ccc;
    }
  }

  .content {
    padding-bottom: 60px;

    .tit {
      background: #ffffff;
      font-size: 32rpx;
      padding-left: 10px;
      line-height: 70rpx;
      margin-bottom: 5px;
    }

    .content-img {
      width: 100%;
    }
  }
}

.goods_nav {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.line {
  height: 10rpx;
  width: 750rpx;
  background: #eee;
}
</style>